<template>
  <div class="org-type">
    <div class="head"></div>
    <Swiper ref="mySwiper0" class="org-type-container swiper" :options="swiperOptions"  @mouseenter.native="stopAutoplay0" @mouseleave.native="startAutoplay0">
      <swiper-slide style="cursor: pointer;" class="swiper-slide" v-for="(item, index) in dataInfo[0]" :key="index">
        <div class="hospital">
          <div class="title">{{ item.title }}</div>
          <div class="content">
            <div class="item">
              <div class="label">机构数</div>
              <div class="value">{{ item.orgCount }}家</div>
            </div>
            <div class="item">
              <div class="label">接入机构</div>
              <div class="value">{{ item.inOrgCount }}家</div>
            </div>
            <div class="item">
              <div class="label">预警数</div>
              <div class="value">{{ item.warnOrgCount }}家</div>
            </div>
            <div class="item">
              <div class="label">处置数</div>
              <div class="value">{{ item.punishOrgCount }}家</div>
            </div>
            <div class="item">
              <div class="label">监控数</div>
              <div class="value">{{ item.deviceCount }}家</div>
            </div>
          </div>

        </div>

      </swiper-slide>
    </Swiper>
	<Swiper ref="mySwiper1" class="org-type-container swiper" :options="swiperOptions" @mouseenter.native="stopAutoplay1" @mouseleave.native="startAutoplay1">
	  <swiper-slide style="cursor: pointer;" class="swiper-slide" v-for="(item, index) in dataInfo[1]" :key="index">
	    <div class="clinic">
	      <div class="title">{{ item.title }}</div>
	      <div class="content">
	        <div class="item">
	          <div class="label">机构数</div>
	          <div class="value">{{ item.orgCount }}家</div>
	        </div>
	        <div class="item">
	          <div class="label">接入机构</div>
	          <div class="value">{{ item.inOrgCount }}家</div>
	        </div>
	        <div class="item">
	          <div class="label">预警数</div>
	          <div class="value">{{ item.warnOrgCount }}家</div>
	        </div>
	        <div class="item">
	          <div class="label">处置数</div>
	          <div class="value">{{ item.punishOrgCount }}家</div>
	        </div>
	        <div class="item">
	          <div class="label">监控数</div>
	          <div class="value">{{ item.deviceCount }}家</div>
	        </div>
	      </div>

	    </div>

	  </swiper-slide>
	</Swiper>
    <div class="page-changer">
      <i class="el-icon-arrow-left" :class="{active: activeArrow==='left'}" @click="handlePagerClick('left')"></i>
      <i class="el-icon-arrow-right" :class="{active: activeArrow==='right'}" @click="handlePagerClick('right')"></i>
    </div>
    <div class="total">总接入机构<div class="total-org">{{ totalOrg }}家</div>
    </div>
  </div>
</template>
<script>
    import {toDayWarn,analysisResult, hospitalNationList,warnList, getWarnType} from "@/api/his/screen";
export default {
  name: "OrgType",
  data() {
    return {
      activeArrow: null,
      swiperOptions: {
          loop: true,
          direction: 'horizontal',
          speed: 1000, // 发生页面切换动画时，动画的切换速度
          autoplay: {
              delay: 2000, // 幻灯片停留时间
              disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          },
      },
      totalOrg: 0,
      dataInfo: [

      ]
    };
  },
    created() {
          this.toDay();
    },
  methods: {
    stopAutoplay0(){
      this.$refs.mySwiper0.swiperInstance.autoplay.stop()
    },
    startAutoplay0(){
      this.$refs.mySwiper0.swiperInstance.autoplay.start()
    },
	stopAutoplay1(){
	  this.$refs.mySwiper1.swiperInstance.autoplay.stop()
	},
	startAutoplay1(){
	  this.$refs.mySwiper1.swiperInstance.autoplay.start()
	},
    handlePagerClick(val) {
      this.activeArrow = val
      if (val === 'left') {
        this.$refs.mySwiper.$swiper0.slideNext()
		this.$refs.mySwiper.$swiper0.slideNext()
      } else {
        this.$refs.mySwiper.$swiper1.slidePrev()
		this.$refs.mySwiper.$swiper1.slidePrev()
      }
    },
    arrayChunk(array) {
            this.dataInfo = []
            let data1 = []
            let data2 = []
            for (let i = 0; i < array.length; i ++) {
                if(i%2!==0){
                    data1.push(array[i])
                }else{
                    data2.push(array[i])
                }
            }
            this.dataInfo.push(data1)
            this.dataInfo.push(data2)

    },
        toDay() {

          //今日和总预警处置数
          // warnList().then(response => {

          // });
          getWarnType().then(response => {
                    if(response.code ==200){
                        this.dataInfo = response.data
                        this.arrayChunk(response.data)
                        if(response.data.length>0){
                            this.totalOrg = response.data[0].totalInto
                        }
                        }
          });
        }
  },
};
</script>
<style lang="scss" scoped>
.org-type {
  .head {
    width: 418px;
    height: 28px;
    background-image: url("~@/assets/images/home/org-type.png");
    margin-bottom: 29px;
    background-repeat: no-repeat;
  }
  .org-type-container {
    height: 175px;
  }
  .hospital {
    background-image: url("~@/assets/images/home/right-hospital.png");
    background-repeat: no-repeat;
    background-position: left top;
    position: relative;
    padding-left: 117px;
    padding-top: 8px;

    &::after {
      content: '';
      width: 301px;
      height: 23px;
      position: absolute;
      background-image: url("~@/assets/images/home/right-hospital-line.png");
      background-size: 301px 23px;
      left: 72px;
      top: 1px;
    }
  }

  .clinic {
    background-image: url("~@/assets/images/home/right-clinic.png");
    background-repeat: no-repeat;
    position: relative;
    background-position: left top;
    padding-left: 117px;
    padding-top: 8px;

    &::before {
      content: '';
      width: 34px;
      height: 27px;
      position: absolute;
      background-image: url("~@/assets/images/icons/hospital-count.png");
      background-size: 34px 27px;
      left: 31px;
      top: 35px;
    }

    &::after {
      content: '';
      width: 301px;
      height: 23px;
      position: absolute;
      background-image: url("~@/assets/images/home/right-hospital-line.png");
      background-size: 301px 23px;
      left: 72px;
      top: 1px;
    }
  }

  .hospital,
  .clinic {
    padding-bottom: 50px;

    .title {
      font-weight: bold;
      font-size: 18px;
      color: #434343;
      margin-bottom: 13px;
    }

    .content {
      display: flex;
      flex-wrap: wrap;

      .item {
        display: flex;
        flex: 36%;
        margin-bottom: 18px;

        .label {
          width: 56px;
          margin-right: 8px;
          font-weight: 500;
          font-size: 14px;
          color: #2F2F2F;
          line-height: 25px;
          opacity: 0.89;
          height: 16px;
          line-height: 16px;
        }

        .value {
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 22px;
          color: #4373F1;
          height: 16px;
          line-height: 16px;
        }
      }

    }


  }

  .total {
    height: 46px;
    background: rgba(48, 130, 255, 0.24);
    border: 1px solid #4373F1;
    line-height: 46px;
    border-left: 7px solid #4373F1;
    padding-left: 18px;
    font-weight: 500;
    font-size: 18px;
    color: #282828;
    display: flex;

    .total-org {
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 22px;
      color: #4373F1;
      line-height: 46px;
      margin-left: 6px;
    }
  }
}

.page-changer {
  text-align: right;
  margin-top: 5px;
  margin-bottom: 20px;
  i {
    cursor: pointer;
    margin-right: 17px;
  }
  .active {
    color: #4373F1;
  }
}
</style>
